<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> 
        .slide-enter{

        }
        .slide-enter-active{

        }
        .slide-leave{

        }
        .slide-leave-active{
            height:0 !important;
            transition: all 0.5s linear;
        }
    </style>
</head>
<body>
    <div id="app">
        <friends-list :friends='friends'></friends-list>
    </div>
    <script src='vue.js'></script>
    <script type="text/html" id="frients-list">
        <div>
            <list-item v-for="group in friends" :group='group'></list-item>
        </div>
    </script>
    <script type="text/html" id="list-item">
        <div>
            <button @click='isOpen=!isOpen'>{{group.title}}</button>
            <transition name='slide'>
                <ul v-show='isOpen'>
                    <li v-for='item in group.data'>{{item}}</li>
                </ul>
            </transition>
        </div>
    </script>
    <script>
        Vue.component('friends-list',{
            template:"#frients-list",
            props:['friends']            
        })
        Vue.component('list-item',{
            template:"#list-item",
            data:function(){
                return {
                    isOpen:true,
                }
            },
            props:['group']            
        })
        new Vue({
            el:'#app',
            data:{
                friends:{
                    friend:{
                        title:'朋友',
                        data:['小贱','谦谦'],
                    },
                    family:{
                        title:'家人',
                        data:['美女','帅哥','小妞'],
                    },
                    classmates:{
                        title:'同学',
                        data:['刘若英','王菲','谢霆锋'],
                    }
                }
            }
        })
    </script>
</body>
</html>